<template>
  <el-dialog
    v-model="dialogVisible"
    title="学生详情"
    width="600px"
    destroy-on-close
  >
    <el-descriptions :column="1" border>
      <el-descriptions-item label="所属学院">{{
        classInfo.college
      }}</el-descriptions-item>
      <el-descriptions-item label="班级编号">{{
        classInfo.classNo
      }}</el-descriptions-item>
      <el-descriptions-item label="班级名称">{{
        classInfo.className
      }}</el-descriptions-item>
      <el-descriptions-item label="班级描述">{{
        classInfo.classDesc
      }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{
        classInfo.createTime
      }}</el-descriptions-item>
      <el-descriptions-item label="建立时间">{{
        classInfo.establishTime
      }}</el-descriptions-item>
      <el-descriptions-item label="状态">
        <span v-if="classInfo.recordStatus ===1" style="color: blue">正常</span>
        <span v-else-if="classInfo.recordStatus ===9" style="color: red">停用</span>
        <span v-else style="color: gold">未知</span>
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { toRefs, defineExpose, reactive } from "vue";
const data = reactive({
  dialogVisible: false, // 控制对话框的显示状态
  classInfo: {
    classDesc: "",
    classId: 0,
    className: "",
    classNo: "",
    college: "",
    createTime: "",
    createUserId: 0,
    establishTime: "",
    recordStatus: 0,
    remark: "",
    updateTime: "",
    updateUserId: 0,
  },
});
let { dialogVisible, classInfo } = toRefs(data);
defineExpose({
  dialogVisible,
  classInfo,
});
</script>